<!-- 1 脚本 -->
<script lang="ts" setup name="Role-Index">
import { ref, reactive } from 'vue'
import { ElMessageBox, ElNotification } from 'element-plus'

//属性
const showForm = ref(false)
const loading = ref(true)
const tableData = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const form = ref({
  name: '',
  password: '',
  gender: '1',
  age: 0,
  pass: '',
  favs: [],
  nationality: 'CN',
  brief: 'adsafdsafsaf',
})

// 方法
function onSubmit() {
  //提示一个 确认框
  ElMessageBox.confirm('确认保存?', '消息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      console.log('保存信息： form.value', form.value)

      //  ElMessage({
      //         type: 'success',
      //         message: '保存成功',
      //  })

      ElNotification({
        title: '信息',
        message: '保存成功',
        type: 'success',
      })

      showForm.value = false

      tableData.push({
        date: '2016-05-04',
        name: form.value.name,
        address: 'No. 189, Grove St, Los Angeles',
      })
    })
    .catch(() => { })
}

setTimeout(() => {
  loading.value = false
}, 1000)
</script>

<!-- 2 模板 -->
<template>
  <div v-loading="loading">
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="grid-content ep-bg-purple" />
        <el-button @click="showForm = true">添加</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>

    <!-- SHIFT + ALT +F  -->
    <el-dialog v-model="showForm" title="用户编辑" width="500">
      <!-- 表单 -->
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名">
          <el-input v-model="form.name" clearable />
        </el-form-item>

        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" clearable />
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="form.gender" size="large" fill="#6cf">
            <el-radio-button label="男" value="1" />
            <el-radio-button label="女" value="2" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="爱好">
          <el-checkbox-group v-model="form.favs">
            <el-checkbox label="足球" size="large" />
            <el-checkbox label="篮球" size="large" />
            <el-checkbox label="乒乓球" size="large" />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="国家">
          <el-select v-model="form.nationality" placeholder="请选择">
            <el-option label="中国" value="CN" />
            <el-option label="美国" value="US" />
          </el-select>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input v-model="form.brief" style="width: 240px" :rows="6" type="textarea" placeholder="请输入爱好" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<!-- 3 样式 -->
<style scoped></style>
